<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>str: {{ str }}</p>
      <p>num: {{ num }}</p>
      <p>bool: {{ bool }}</p>
      <p>null: {{ n }}</p>
      <p>undefined: {{ u }}</p>
      <p>bigInt: {{ big }}</p>
      <p>symbol: {{ sym }}</p>
      <p>object: {{ obj }}</p>
      <p>array: {{ arr }}</p>
      <p>function: {{ func }}</p>

      <p>姓名：{{ obj.name }}</p>
      <p>年龄：{{ obj.age }}</p>
      <p>{{ arr[1] }}</p>
      <p>{{ func() }}</p>

      <p>{{ bool ? 'ok' : 'no ok' }}</p>
      <p>{{ bool || 'ok' }}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      /*
        Vue提供了模板语法：
          1. 什么是模板？
            Vue 中的 HTML 代码
          2. 什么是模板语法？
            Vue 给 HTML 提供了一些特殊语法。
            例如：{{ msg }}
          3. 有哪些模板语法：
            - 插值语法：
              名称：双大括号语法 / 双大括号表达式 / Mustache 语法
              作用：在 html 渲染 Vue 中的数据（渲染动态js数据）
              语法：
                {{ JS表达式 }}
            - 指令语法
      */
      /*
        数据类型：
          基本数据类型：number string boolean undefined null bigint symbol
          引用数据类型：object array function
      */
      const vm = new Vue({
        data: {
          // 基本数据类型: 主要还是使用 number 和 string
          str: "hello vue",
          num: 123,
          bool: true,
          n: null,
          u: undefined,
          big: 456n,
          sym: Symbol(),
          // 引用数据类型: 内部转String渲染
          obj: {
            name: "jack",
            age: 18,
          },
          arr: [1, 2, 3],
          func: function () {
            console.log(123);
            return 123;
          },
        },
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
